<template>
	<el-card shadow="hover" style="flex: 3">
		<view slot="header" class="header">
			<i class="icon el-icon-s-data"></i>
			<text>用户</text>
		</view>
		<view class="box-card-body" style="height: 300px">
			<view id="chartUserCount" class="chart"></view>
		</view>
	</el-card>
</template>

<script>
import * as echarts from "echarts"

export default {
	name: "chartUserCount",
	data() {
		return {}
	},
	mounted() {
		this.init()
	},
	methods: {
		async init() {
			const res = await vk.callFunction({
				url: "admin/business/kh.stats.chartUserCount",
				data: { mode: this.mode }
			})
			let xList = []
			let yList = []
			res.list.forEach(item => {
				xList.push(item.text)
				yList.push(item.value)
			}) 
			// 渲染图表
			let myChart = echarts.getInstanceByDom(document.getElementById("chartUserCount"))
			if (myChart == null) {
				// 如果不存在，就进行初始化。
				myChart = echarts.init(document.getElementById("chartUserCount"))
			}
			let option = {
				backgroundColor: "#ffffff",
				grid: {
					left: "1%",
					right: "1%",
					top: "5%",
					bottom: "1%",
					containLabel: true
				},
				tooltip: { trigger: "axis" },
				xAxis: [
					{
						type: "category",
						axisLabel: { color: "#9a9a9a", interval: 0, rotate: 40 },
						axisLine: { show: true, lineStyle: { color: "#397cbc" } },
						axisTick: { show: false },
						data: xList
					}
				],
				yAxis: [
					{
						type: "value",
						name: "用户",
						min: 0,
						minInterval: 1,
						axisLabel: { formatter: "{value}", textStyle: { color: "#9a9a9a" } },
						axisLine: { show: true, lineStyle: { color: "#dfdfdf" } },
						axisTick: { show: false },
						splitLine: { show: true, lineStyle: { type: "dashed", color: "#f4f4f4" } }
					}
				],
				series: [
					{
						name: "用户数(人)",
						type: "line",
						symbol: "circle",
						smooth: true,
						itemStyle: {
							normal: {
								color: "#00a0a6",
								lineStyle: { color: "#409EFF", width: 2 },
								areaStyle: { color: "#8cc5ff" }
							}
						},
						markPoint: { itemStyle: { normal: { color: "red" } } },
						data: yList
					}
				]
			}
			myChart.setOption(option)
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/ .el-card__header {
	padding: 14px 16px !important;
}

/deep/ .el-card__body {
	padding: 14px 14px 6px !important;
}

.header {
	display: flex;
	align-items: center;
	font-size: 14px;
	.icon {
		border-radius: 50%;
		border: 5px solid rgb(230, 247, 255);
		background-color: rgb(230, 247, 255);
		color: rgb(24, 144, 255);
		margin-right: 6px;
	}
}

.chart {
	width: 100%;
	height: 100%;
}
</style>
